<template>
	<view class="head">
		<view class="">
			<view class="img">
				<view class="imgs" style="font-size: 20px;">
					欢迎你回来！
				</view>
				<view class="weathers" style="height: 60rpx; height: 90rpx; border-radius: 5px;display: flex;justify-content:space-between;align-items: center;
					">
					<view class="" style="display: flex;fljustify-content: space-between; flex-direction: row; font-size: 15px;">
						<view class="">
						{{weatherNow.temp}}°C
							<image style="width: 50px;height: 50px;"
								:src="'/static/wetherIcons/'+ weatherNow.icon +'.png'" mode="">
							</image>
						</view>


						<view class="" style="position: relative; left: 90px;">
							<image @tap="showme" src="/static/images/location.png" mode=""
								style="width: 40px;height: 40px;"  />
							经济技术开发区
						</view>


					</view>


				</view>
			</view>
		</view>

		<!-- 公交路线搜索-->
		<uni-search-bar @confirm=" searchCityBus" placeholder="输入查询的公交路线" @input="" v-model="searchKey" />
		<!-- 轮播图 -->
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-color="#fff" indicator-active-color="#ff6700">
			<swiper-item v-for="(item,index) in lunboList" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.url" mode="widthFix"></image>

				</view>
			</swiper-item>
		</swiper>





		<!-- 分类导航 -->
		<view class="nav">
			<uni-section class="mb-10" title="分类" type="line" style="border-radius: 8px ; margin: 3px;">
				<uni-grid :show-border="false" :column="6" @change="changeGrid">
					<uni-grid-item v-for="(item,index) in gridData" :index="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<img style="height: 40rpx; width: 40rpx;" :src="item.pic" alt="" />
							<text class="text" style="font-size: 10px;">{{item.title}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		<!-- 实时天气 -->
		<view class="weather">
			<view class="moer">
				<view class="">
					<view class="moer" @tap="more" style="display: flex; justify-content: end;">
						<view class="">未来7天天气预报</view>

					</view>
					<!-- <view class="text" style="font-size: 34rpx; display: block;  disjustify-content: end;">
							{{weatherNow.text}}
						</view> -->
					<view class="icon">

						<view class="temp" style="font-size: 20px;margin-left: 10px;">
							{{weatherNow.temp}}°C
						</view>

						<view class="">
							<image style="width: 60px;height: 60px;"
								:src="'/static/wetherIcons/'+ weatherNow.icon +'.png'" mode="" />
						</view>

					</view>
					<view class="content" style="">
						<view class="windScale" style=" margin-left: 10rpx;">
							{{weatherNow.windDir}} {{weatherNow.windScale}}级
						</view>

						<view class="feelsLike" style="margin-left: 10rpx;">
							体感温度： {{weatherNow.feelsLike }}°C
						</view>
						<view class="humidity" style="margin-left: 10rpx;">
							湿度： {{weatherNow.humidity }}%
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>



</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config'

	import {
		userStore
	} from '../../store/userStrore'

	let store = userStore()
	onLoad(() => {
		getLunbo()
		searchCityBus()
		getWeather()
		getPos()

	})

	let lunboList = ref([])
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leandcloud_url + "/1.1/classes/RotatePic")
		console.log(res)
		lunboList.value = res.results
	}

	let searchKey = ref("")

	function searchCityBus() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入搜索名称",
				icon: "none"
			})
		} else {
			let url = `https://uri.amap.com/line?name=601&city=029&src=mypage&callnative=0`
			window.location.href = url
		}
	}

	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}


	let gridData = [{
			title: '热映电影',
			pic: 'static/icon/a-shexiangjidianyingshipin.png'
		},
		{
			title: '微博热搜',
			pic: 'static/icon/wb.png'
		},
		{
			title: '今日运势',
			pic: 'static/icon/icon_jintian.png'
		},
		{
			title: '天气预报',
			pic: 'static/icon/xianxingtianqiyubao.png'
		},
		{
			title: '收藏夹',
			pic: 'static/icon/shoucang.png'
		}
	]

	function changeGrid(e) {
		let index = e.detail.index
		console.log(index)
		switch (index) {
			case 0:
				uni.navigateTo({
					url:"/pages/movie/movie"
				})
				break;
			case 1:
				uni.navigateTo({
					url: "/pages/weibo/weibo"
				})
				break;
			case 2:
				uni.navigateTo({
					url: "/pages/fortuneDetails/fortuneDetails"
				})
				break;
			case 3:
				uni.navigateTo({
					url:"/pages/preWeather/preWeather"
				})
				break;
			case 4:
				uni.navigateTo({
					url:"/pages/star/star"
				})
		}

	}


	function getPos() {
		uni.getLocation({
			success(res) {
				console.log(res)
				store.setPos(res.latitude, res.longitude)

			}
		})
	}

	function more() {
		uni.navigateTo({
			url: "/pages/preWeather/preWeather"
		})
	}

	function showme() {
		uni.navigateTo({
			url: "/pages/myWebView/myWebView?type=1"
		})
	}
</script>

<style lang="scss" scoped>
	.head {
		padding: 10px;
		/* 内边距
		background-color: #f4f4f4;
		/* 背景颜色 */
		background: url('/static/images/1.png');
	}

	.swiper {
		height: 200px;
		/* 轮播图高度 */
	}

	.uni-search-bar {
		margin: 10px 0;
		/* 搜索框上下间距 */
	}

	/* 分类导航样式 */
	.nav {
		height: 110px;
		/* 导航高度 */
	}

	.uni-section {
		border-radius: 8px;
		margin: 3px;
		background-color: #fff;
		/* 背景颜色 */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	/* 网格项样式 */
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 纵向居中对齐 */
		justify-content: center;
		/* 水平居中对齐 */
		padding: 5px;
		/* 内边距 */
		border-radius: 5px;
		/* 圆角 */
		background-color: #fff;
		/* 背景颜色 */
		transition: transform 0.2s;
		/* 添加平滑过渡效果 */
	}

	.grid-item-box:hover {
		transform: scale(1.05);
		/* 悬停效果 */
	}

	.grid-item-box img {
		height: 40rpx;
		/* 图片高度 */
		width: 50rpx;
		/* 图片宽度 */
	}

	.grid-item-box .text {
		font-size: 10px;
		/* 文本大小 */
		color: #333;
		/* 字体颜色 */
		margin-top: 5px;
		/* 文本与图片之间的间距 */
	}

	/* 实时天气样式 */
	.weather {
		display: flex;
		justify-content: center;
		padding: 10px;
		background-color: #f5f5f5;
		border: 1px solid #ccc;
		border-radius: 5px;

	}



	.icon {
		width: 280px;
		height: 60px;
		bottom: 10rpx;
		display: block;
		justify-content: center;
		flex-direction: row;

	}

	.temp {
		font-size: 24px;
		/* 根据需要调整字体大小 */
		font-weight: bold;
		margin-right: 10px;
	}

	.text {
		font-size: 16px;
		// margin-right: 10px;
	}

	.content {
		display: flex;
		flex-direction: row;
		margin-right: 10px;
	}

	.windScale,
	.feelsLike,
	.humidity {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.more {
		// position: absolute;
		top: 10px;
		left: 10px;
		cursor: pointer;
		font-size: 16px;
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.weather-container {
			flex-direction: column;
			align-items: flex-start;
		}

		.icon {

			display: flex;
			justify-content: center;
			flex-direction: row;
		}

		.more {
			position: static;
			margin-top: 10px;
		}
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.weather .text {
			font-size: 28rpx;
			/* 小屏幕下字体大小 */
		}
	}
</style>